[우테코]프론트엔드 프리코스 3주차 후기
December 15, 2020
미션을 진행하면서 고민하고 느낀 점 🧑💻
기능목록 작성
구현할 기능목록 작성은 1주차 미션부터 제시된 진행 요구사항이었습니다. 1주차, 2주차 미션을 진행하면서 프로그래밍을 시작하기 전 구현할 기능목록을 미리 작성했습니다. 미리 구현할 기능목록을 작성하고 시작하니 긍정적인 점들이 많이 느꼈습니다. commit 단위가 명확해지고 전체 플로우와 예외사항을 미리 머리 속에 한번 그려볼 수 있었습니다.
1, 2주차 미션을 진행하면서 구현할 기능목록 작성하고 있었지만 기능이 명확하지 않았고 그에 따라 한 커밋 단위에 여러 기능이 들어가는 일도 비일비재 했습니다. 다행히 이번 미션을 시작하기 전 피드백을 통해 구현할 기능 목록을 어떻게 작성해야 하는지 예시를 알 수 있었고 예시를 따라가면서 기능과 예외케이스를 명확하게 명시하고 프로그래밍을 진행할 수 있었습니다. 기능과 예외케이스를 상세히 명세함에 따라 기능 단위 커밋이 가능해졌고 커밋 이후 다음 차례에 어떤 기능을 구현해야하는지도 명확해져 보다 수월하게 프로그래밍을 진행할 수 있었습니다.
UI
이번 미션은 지하철 노선도를 관리하는 페이지를 만드는 미션이었습니다. 이번 미션에서는 HTML파일이 제공되지 않았습니다. 기존 두 번의 미션에서는 HTML파일이 제공되어 UI에 대한 고민이 상대적으로 덜했습니다. 하지만 이번 미션에서는 처음부터 UI를 어떻게 구성할지부터가 큰 고민이었습니다.
저는 메뉴 버튼 등과 같이 변경사항이 없는 부분들과 큰 틀을 HTML로 작성하고 역 목록, 노선 목록 등 저장된 데이터에 따라서 다르게 보여지는 부분들을 JavaScript를 통해 구현했습니다.
localStorage
localStorage의 존재는 알았지만 다뤄본 적이 없어 이번 미션의 요구사항을 봤을 때 당혹스러웠습니다. 하지만 다행히도 이전 스터디를 참여하면서 다른 분들이 localStorage를 활용하시는 모습을 봤던 게 큰 도움이 됐습니다.
처음에는 JSON.parse()와 JSON.stringfy() 를 통해 localStorage에 값을 저장하고 불러오는 부분부터 난관을 겪었습니다. 하지만 값을 저장하고 불러오는 부분이 익숙해지면서 전체 모듈 어디서나 호출 가능한 localStorage가 전역 변수를 사용하는 것처럼 느껴져 오히려 편리한 부분도 있다고 느꼈습니다.
dataset
data속성을 이용하라는 요구사항 역시 이번 미션에서 추가 된 요구사항입니다. 요구사항에 첨부된 명세(링크)를 읽고 굉장히 좋다는 생각을 했습니다. 이 속성을 어디서 활용할 수 있을까 고민하다가 저는 ‘삭제’기능을 구현하는데 활용했습니다.
역과 노선을 삭제해주는 ‘삭제’버튼은 매번 새로 렌더되며 같은 아이디 값을 지니고 있습니다. 삭제할 타겟을 확인하기 위해 아이디 외의 다른 정보가 필요하다고 생각했습니다. data속성을 통해 삭제 버튼을 만들 때 삭제 버튼과 해당 삭제버튼이 가리키는 요소에 같은 data값을 부여했습니다. 그에 따라 삭제 버튼이 클릭 됐을 때 제거해야하는 타겟을 쉽게 가져올 수 있엇습니다.
예외처리
발생할 수 있는 예외케이스에 대해 고민한다.
이번 피드백에 들어있던 내용입니다. 지난 미션들을 진행하면서도, 이번 미션을 진행하면서도 항상 고민했던 부분입니다. 미션에서 요구하는 예외케이스들에 대해서는 당연히 처리를 하고 있습니다. 하지만 미션에서 요구하는 것 이상의 예외케이스들에 대해서도 고민하면서 미션을진행했습니다.
역 이름이 공백일 때, 노선 이름이 공백일 때, 구간을 추가하는 부분에서 추가할 구간의 위치가 음수일 때 등등 많은 예외케이스를 가정해두고 프로그래밍을 진행했습니다. 프로그래밍을 하다보니 생각하지 못했던 새로운 예외들을 발견하기도 하며 최대한 예외케이스들로 인한 에러가 발생하지 않도록 많은 고민을 하며 이번 미션을 진행했습니다.
배우고 적용한 점 👨🏫
UI
- UI를 작성하면서 기존에 사용해본 적 없던
<table>태그와<select>태그들을 사용하게 됐습니다. <table>태그의border속성과<select>태그의option속성을 통해 미션에서 제시되는 실행결과와 유사한 화면을 만들었습니다.
localStorage
localStorage를 통해 역, 노선 등의 상태값들을 관리했습니다.JSON.parse()와JSON.stringfy()를 사용해서 하나의key에 해당하는value들을 모두 담아서 관리했습니다.
dataset
dataset역시 이번 미션을 통해 처음으로 사용했습니다.dataset옵션을 통해 새롭게 UI를 화면에 그릴 때 미리 값을 주고 이벤트가 발생할 때dataset에 담긴 값을 통해 타겟을 찾는 방식으로 적용했습니다.
상태관리
- 이전까지의 미션들과 달리 하나의 상태값만 가지는게 아니라 여러 요소의 상태값을 확인하면서 상호작용 해야하고 상호 작용한 결과가 새롭게 화면에 보여야했습니다.
- 이 부분을 해결하기 위해 화면을 그리는(업데이트) 부분과 이벤트를 관리하는 요소들을 별도의 모듈로 관리해 이벤트가 발생하면 화면을 다시 그리는 방식을 적용했습니다.
- 이 과정에서 MVC패턴을 찾아봤지만 바로 코드에 적용하지는 못 했습니다. 과제를 다 마친 지금에야 “아 이래서 MVC패턴을 사용하는구나”하고 뒤늦게 깨우치는 중입니다.
총평
지난 1주차, 2주차 미션보다 저에게는 굉장히 어렵게 느껴졌던 3주차 미션이었습니다. 하지만 과제가 어려운만큼 localStorage, dataset, 상태관리, UI등 많은 부분을 새롭게 배울 수 있었던 한 주였습니다.
지난 3주 간 미션을 진행하면서 정말 많이 배우고 성장할 수 있었습니다. 한 주간 최선을 다해 미션을 수행했다고 생각하지만 매번 미션을 제출하고 나면 아쉬움이 한켠에 남는건 어쩔 수 없는거 같습니다. 이제 마지막 코딩테스트만 남았는데 남은 기간 최선을 다해 부족한 부분을 채워서 코딩테스트에서 좋은결과를 얻고 싶습니다.
마지막으로 3주 간 함께 미션을 진행하는 동료 분들의 코드와 PR을 통해서도 많은 것들을 얻어 갈 수 있었습니다! 혹시나 지금 함께 이 과정을 진행하고 계신 동료 분이 이 글을 보신다면 끝까지 같이 힘내자는 말을 전하고 싶습니다!!
